<script setup>
import { ref } from 'vue'


const selectedItem = ref(null);// 存储当前选中的项——保存选中项的key值
const dialogVisible = ref(false);
const currentImageSrc = ref('');
const currentName = ref('');


const data = ref([
    {
        "key": "purple", "name": "紫影幽蓝",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/f5406925-fbea-498e-bfb8-af900069e659/1.png"
    },
    {
        "key": "green", "name": "清新翠绿",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/dfea2504-6c84-4e72-8878-9232c7795cbf/2.png"
    },
    {
        "key": "lightblue", "name": "清逸天蓝 ",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/5818984f-2f17-4814-84d0-622cc157e4cd/3.png"
    },
    {
        "key": "taupe", "name": "质感之境",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/4c94360b-5b09-41a5-a16d-07a881d0e236/4.png"
    },
    {
        "key": "blue", "name": "星光夜影",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/9bb5f37e-9983-4d47-abbf-0e322e964d85/5.png"
    },
    {
        "key": "telecomRed", "name": "炽热暖阳",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/2477dccf-85b7-48e7-86a1-e1f574c11a36/6.png"
    },
    {
        "key": "telecomGreen", "name": "幻翠奇旅",
        "thumbnail": "https://bjcdn.openstorage.cn/open_res/xfyundoc/2023-12-08/6c77d553-4f04-4ff6-845d-ae6e579bf8b6/7.png"
    },
    {
        "key": "dragon", "name": "龙韵新禧",
        "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-23/6694baab-7e49-4e3f-8d03-eee11c0e3f5a/1705975235721/8.png"
    },
    {
        "key": "bluedream", "name": "蓝梦白翼",
        "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-23/ad3b551d-5482-43d9-95ce-d4a36d1114cc/1705975293375/9.png"
    },
    {
        "key": "deepdark", "name": "墨韵金章",
        "thumbnail": "https://openres.xfyun.cn/xfyundoc/2024-01-22/e79ed3f0-2a9e-4514-b7f6-b526b5e1699d/1705909573847/10.png"
    },
    {
        "key": "starryJourney", "name": "星辰旅途",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/ysw_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2011.png"
    },
    {
        "key": "rippleWaters", "name": "水波涟漪",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/qu1_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2012.png"
    },
    {
        "key": "crystalFrost", "name": "晶莹霜华",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/cs7_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2013.png"
    },
    {
        "key": "sereneSnowMountain", "name": "雪山静谧",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/le5_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2014.png"
    },
    {
        "key": "auroraMiracle", "name": "极光奇迹",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/u8o_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2015.png"
    },
    {
        "key": "dawnMistRising", "name": "晨雾初升",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/2mh_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2016.png"
    },
    {
        "key": "nightSkyMirror", "name": "夜空之镜",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/k2c_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2017.png"
    },
    {
        "key": "whisperingWaves", "name": "海浪呢喃",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/aiv_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2018.png"
    },
    {
        "key": "brocadeDragonSoar", "name": "锦绣龙腾",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/cym_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2019.png"
    },
    {
        "key": "stagePrelude", "name": "舞台序曲",
        "thumbnail": "http://bjcdn.openstorage.cn/open_res/m9b_%E4%B8%BB%E9%A2%98%E5%8D%A1%E7%89%87%E5%A4%87%E4%BB%BD%2020.png"
    }
])
// 一共20个

const formData = reactive({
    name: '',
    speaker: '',
})
const rules = reactive({
    name: [
        { required: true, message: '请输入PPT题目', trigger: 'blur' },
        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ],
    speaker: [
        { required: true, message: '请输入演讲人', trigger: 'blur' },
    ]
})

function showPopup(item) {
    dialogVisible.value = true
    currentImageSrc.value = item.thumbnail
    currentName.value = item.name
    selectedItem.value = item.key;
}
// 表单重置
function resetForm() {
    formChoice.value = {
        name: null,
        speaker: null,
    };
    proxy.resetForm("formData");
}

function close() {
    dialogVisible.value = false;
    resetChoice();
}

function handelConfirm() {
    formRef.value.validate((valid) => {
        if (!valid) return;
        resetForm();
        close();
    });
}
</script>

<template>
    <div>
        <el-card style="margin: 5px 0;">
            <el-row :gutter="20">
                <el-col :span="6" v-for="(item, index) in data" :key="index">
                    <el-card style="margin: 10px 0;" id="theme-item" @mouseover="item.showButton = true"
                        @mouseleave="item.showButton = false">
                        <img :src="item.thumbnail" class="thumbnail" />
                        <p class="name">{{ item.name }}</p>
                        <el-button v-if="item.showButton" class="popup-button" type="warning" @click="showPopup(item)"
                            plain>使用此模板</el-button>
                        <div class="cover"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog title="定义ppt" v-model="dialogVisible">
            <img :src="currentImageSrc" alt="点击的图片" class="dialog-image" />
            <p class="dialog-name">{{ currentName }}</p>
            <el-form :model="formData" :rules="rules" label-width="120px">
                <el-form-item label="PPT题目" prop="name">
                    <el-input v-model="formData.name" type="text" placeholder="请输入PPT题目" clearable></el-input>
                </el-form-item>
                <el-form-item label="演讲人" prop="speaker">
                    <el-input v-model="formData.speaker" type="text" placeholder="请输入演讲人" clearable></el-input>
                </el-form-item>
            </el-form>
            <slot name="footer" class="dialog-footer">
                <el-button type="primary" @click="handelConfirm" style="margin-left: 350px;">确定</el-button>
                <el-button @click="close">取消</el-button>
            </slot>
        </el-dialog>
    </div>
</template>

<style scoped>
.thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.name {
    text-align: center;
    margin-top: 10px;
}

#theme-item {
    position: relative;
}

#theme-item:hover {
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.dialog-image {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

.dialog-name {
    text-align: center;
    margin-top: 10px;
}

.popup-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
</style>